<template>
    <div class="app">
        <div>
            <div class="box">
                <div class="pic" :style="style_box_v">

                </div>
                <div class="val">
                    {{value}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "function_box",
        data() {
            return {
                style_box_v: this.style_box()
            }
        },
        methods: {
            style_box() {
                return {
                    "background-image": `url(${this.imgUrl})`
                }
            }
        },
        props: {
            imgUrl: String,
            value: String
        }
    }
</script>

<style lang="less" scoped>



    .pic {
        width: 100px;
        height: 100px;
        object-fit: cover !important;
        object-position: center;
        background-repeat: no-repeat;
        background-size: cover;

    }

    .box {
        border: 1px silver solid;
        height: 200px;
    }

    .box {
        * {
            margin: auto;
        }

        .val {
            color: #9499A0;
            text-align: center;
            position: relative;
            top: 40px;
            transition: 2s;
        }

        .pic {
            margin-top: 20px;
        }
    }

      .app {

        transition: 1s;
        user-select: none;

        &:hover {
            background-color: silver ;
            .val{
                color: white !important;
            }
        }
    }

</style>